<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>6. 小程序页面管理与跳转 | 被删的前端游乐场</title>
    <meta name="description" content="Just playing around">
    
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.a683ed26.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.e5cf4092.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.c853767c.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.eed49fdd.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/125.37ef65ab.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.a683ed26.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link router-link-active">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link router-link-active">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-0cd75e06><span class="stand" data-v-0cd75e06></span> <div class="cat" data-v-0cd75e06><div class="body" data-v-0cd75e06></div> <div class="head" data-v-0cd75e06><div class="ear" data-v-0cd75e06></div> <div class="ear" data-v-0cd75e06></div></div> <div class="face" data-v-0cd75e06><div class="nose" data-v-0cd75e06></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div></div> <div class="tail-container" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>小程序原理</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/wxapp/wxapp-principle/1-wxapp-generate.html" class="sidebar-link">1. 小程序的诞生</a></li><li><a href="/front-end-playground/wxapp/wxapp-principle/2-wxapp-technology-architecture.html" class="sidebar-link">2. 小程序的底层框架</a></li><li><a href="/front-end-playground/wxapp/wxapp-principle/3-wxapp-set-data.html" class="sidebar-link">3. 解剖小程序的setData</a></li><li><a href="/front-end-playground/wxapp/wxapp-principle/4-wxapp-manage-and-security.html" class="sidebar-link">4. 理解小程序的安全与管控</a></li><li><a href="/front-end-playground/wxapp/wxapp-principle/5-wxapp-basic-lib.html" class="sidebar-link">5. 关于小程序的基础库</a></li><li><a href="/front-end-playground/wxapp/wxapp-principle/6-wxapp-page-and-navigate.html" class="active sidebar-link">6. 小程序页面管理与跳转</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-principle/6-wxapp-page-and-navigate.html#小程序启动过程" class="sidebar-link">小程序启动过程</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-principle/6-wxapp-page-and-navigate.html#注册-app-实例" class="sidebar-link">注册 App 实例</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-principle/6-wxapp-page-and-navigate.html#获取-app-实例" class="sidebar-link">获取 App 实例</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-principle/6-wxapp-page-and-navigate.html#页面生命周期" class="sidebar-link">页面生命周期</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-principle/6-wxapp-page-and-navigate.html#页面导航" class="sidebar-link">页面导航</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-principle/6-wxapp-page-and-navigate.html#页面层级准备" class="sidebar-link">页面层级准备</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-principle/6-wxapp-page-and-navigate.html#参考" class="sidebar-link">参考</a></li></ul></li><li><a href="/front-end-playground/wxapp/wxapp-principle/7-wxapp-component.html" class="sidebar-link">7. 小程序自定义组件</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>小程序开发技巧</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>小程序开发月刊</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>一个小程序有很多页面，每个页面又有各自的线程、生命周期和功能逻辑。关于小程序的生命周期、页面之间的跳转有哪些特殊的地方呢？</p> <h1 id="小程序的启动"><a href="#小程序的启动" aria-hidden="true" class="header-anchor">#</a> 小程序的启动</h1> <h2 id="小程序启动过程"><a href="#小程序启动过程" aria-hidden="true" class="header-anchor">#</a> 小程序启动过程</h2> <p>初次进入小程序的时候，微信客户端初始化好宿主环境，同时从网络下载或者从本地缓存中拿到小程序的代码包，把它注入到宿主环境。大概是这么个过程：</p> <ol><li>创建线程（渲染层和逻辑层），启动小程序。</li> <li>载入基础库（WebView 基础库和 AppService 基础库）。</li> <li>载入小程序业务代码（下载或者从本地缓存中拿到）。</li> <li>使用<code>App()</code>注册程序实例。</li></ol> <p>为了让小程序业务代码能够调用 API 以及组件，就需要在启动小程序后先载入基础库，接着再载入业务代码。
由于所有小程序都需要注入相同的基础库，所以<strong>小程序的基础库会被提前内置在微信客户端</strong> 。而基础库是热更新的，故一般等微信客户端携带上一个稳定版的基础库正式发布后，再进行新版本基础库的灰度和推送。</p> <h2 id="注册-app-实例"><a href="#注册-app-实例" aria-hidden="true" class="header-anchor">#</a> 注册 App 实例</h2> <p>宿主环境提供了<code>App()</code>构造器用来注册一个程序 App。App 实例是单例对象，在其他 JS 脚本中可以使用宿主环境提供的<code>getApp()</code>来获取程序实例。</p> <p><strong>App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。</strong></p> <p><code>App()</code>函数用来注册一个小程序。接受一个<code>Object</code>参数，其指定小程序的生命周期回调等。</p> <h3 id="onlaunch"><a href="#onlaunch" aria-hidden="true" class="header-anchor">#</a> onLaunch</h3> <p>小程序初始化完成时（全局只触发一次）触发<code>onLaunch</code>回调。
在微信客户端中打开小程序有很多途径，对不同途径的打开方式，小程序有时需要做不同的业务处理。所以微信客户端会把打开方式带给<code>onLaunch</code>和<code>onShow</code>的调用参数<code>options</code>，我们可以根据参数来判断一些进入方式，以及做对应的逻辑处理。</p> <p>例如，我需要拿到从另外一个小程序跳转过来携带的信息，此时场景值应该是 1037（参考<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html" target="_blank" rel="noopener noreferrer">场景值<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>）：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
  <span class="token function-variable function">onShow</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>scene <span class="token operator">===</span> <span class="token number">1037</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> data <span class="token operator">=</span> e<span class="token punctuation">.</span>referrerInfo <span class="token operator">&amp;&amp;</span> e<span class="token punctuation">.</span>referrerInfo<span class="token punctuation">.</span>extraData<span class="token punctuation">;</span> <span class="token comment">// 拿到对应的数据</span>
      <span class="token keyword">const</span> refAppid <span class="token operator">=</span> e<span class="token punctuation">.</span>referrerInfo <span class="token operator">&amp;&amp;</span> e<span class="token punctuation">.</span>referrerInfo<span class="token punctuation">.</span>appId<span class="token punctuation">;</span> <span class="token comment">// 拿到对应的小程序appid</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="onshow"><a href="#onshow" aria-hidden="true" class="header-anchor">#</a> onShow</h3> <p>小程序启动，或从后台进入前台显示时触发<code>onShow</code>回调。通常我们用来处理数据和状态的更新。
小程序进入后台状态：当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁。</p> <h3 id="onhide"><a href="#onhide" aria-hidden="true" class="header-anchor">#</a> onHide</h3> <p>小程序从前台进入后台时触发<code>onHide</code>回调。
小程序进入前台状态：当再次进入微信或再次打开小程序，又会从后台进入前台。</p> <h2 id="获取-app-实例"><a href="#获取-app-实例" aria-hidden="true" class="header-anchor">#</a> 获取 App 实例</h2> <p>我们可以使用全局的<code>getApp()</code>函数来获取到小程序 App 实例（在<code>App()</code>内的函数中使用<code>this</code>就可以拿到<code>app</code>实例。）。</p> <p>前面我们可以看到，App 的生命周期是由微信客户端根据用户操作主动触发的。故我们通过<code>getApp()</code>获取实例之后，不应该私自调用生命周期函数。</p> <p>具体的原理是什么呢？小程序的 JS 脚本是运行在 JsCore 的线程里，小程序的每个页面各自有一个 WebView 线程进行渲染，所以<strong>小程序切换页面时，小程序逻辑层的 JS 脚本运行上下文依旧在同一个 JsCore 线程中。</strong></p> <p>因此，<strong>App 构造器可以传递其他参数作为全局属性以达到全局共享数据的目的。</strong></p> <p>由于所有页面的脚本逻辑都跑在同一个 JsCore 线程，页面使用<code>setTimeout</code>或者<code>setInterval</code>的定时器，即使切换了页面，也需要自行清理定时器。可以选择：</p> <ul><li>在页面离开<code>onUnload</code>、<code>onHide</code>等的时候自行清理</li> <li>做全局的定时器管理（当然也还是需要关闭时清理）</li></ul> <p>说到页面之间的数据共享，我们也该来讲讲小程序里页面的启动。</p> <h1 id="小程序页面"><a href="#小程序页面" aria-hidden="true" class="header-anchor">#</a> 小程序页面</h1> <h2 id="页面生命周期"><a href="#页面生命周期" aria-hidden="true" class="header-anchor">#</a> 页面生命周期</h2> <p>宿主环境提供了<code>Page(Object)</code>构造器用来注册一个小程序页面，接受一个<code>Object</code>类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。</p> <p>注意：<strong>Object 内容在页面加载时会进行一次深拷贝，需考虑数据大小对页面加载的开销。</strong></p> <p>这里我们先来看看官方的生命周期图：</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/mina-lifecycle.png" alt="image"></p> <p>左侧是渲染层，右侧是逻辑层。几件事：</p> <ol><li>渲染层和逻辑层之间通信，是通过 Native 转发实现的。</li> <li>逻辑层通过 Page 实例的<code>setData</code>方法传递数据到渲染层。由于需要两个线程的一些通信消耗，为了提高性能，每次只设置需要改变的最小单位数据。</li> <li>生命周期顺序：<code>onLoad</code> -&gt; <code>onShow</code> -&gt; <code>onReady</code>。</li></ol> <h3 id="页面生命周期函数"><a href="#页面生命周期函数" aria-hidden="true" class="header-anchor">#</a> 页面生命周期函数</h3> <p><strong>onLoad(Object query)</strong>
页面加载时触发。一个页面只会调用一次，可以在<code>onLoad</code>的参数中获取打开当前页面路径中的参数。</p> <p><strong>onShow()</strong>
页面显示/切入前台时触发。</p> <p><strong>onReady()</strong>
页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。</p> <p><strong>onHide()</strong>
页面隐藏/切入后台时触发。</p> <p><strong>onUnload()</strong>
页面卸载时触发。</p> <p>和小程序实例的生命周期对比，其实页面也是有些相似。这里需要注意几点：</p> <ul><li>当前页面路径的参数获取，只能在<code>onLoad(query)</code>的<code>query</code>参数中获取，无法在<code>onShow()</code>中获取</li> <li><code>onLoad</code>、<code>onReady</code>和<code>onUnload</code>，一个页面都只会调用一次</li> <li>页面是卸载还是切换到后台，这些除了与小程序的后台切换有关系，还会与页面的跳转、切换逻辑有关系</li></ul> <p>下面我们就来看下页面的逻辑。</p> <h2 id="页面导航"><a href="#页面导航" aria-hidden="true" class="header-anchor">#</a> 页面导航</h2> <p>我们知道，一个小程序会拥有多个页面。在小程序里会有页面的层级关系，例如通过<code>wx.navigateTo</code>推入一个新的页面，在首页使用 2 次<code>wx.navigateTo</code>后，页面层级会有三层：</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/111.png" alt="image"></p> <h3 id="获取页面栈"><a href="#获取页面栈" aria-hidden="true" class="header-anchor">#</a> 获取页面栈</h3> <p><code>getCurrentPages()</code>函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
需要注意的是：</p> <ul><li>修改页面栈会导致路由以及页面状态错误</li> <li><code>App.onLaunch</code>的时候 page 还没有生成，不能在这调用<code>getCurrentPages()</code></li></ul> <p>但是其实不是每一次切换页面，都会被记录到页面栈里，我们看看页面导航的一些方法和行为：</p> <table><thead><tr><th>路由方式</th> <th>触发时机</th> <th>页面栈表现</th> <th>进入方式</th></tr></thead> <tbody><tr><td>初始化</td> <td>小程序打开的第一个页面</td> <td>新页面入栈</td> <td>从下往上升起</td></tr> <tr><td>打开新页面</td> <td>调用 API <code>wx.navigateTo</code></td> <td>新页面入栈</td> <td>从右往左切入</td></tr> <tr><td>页面重定向</td> <td>调用 API <code>wx.redirectTo</code></td> <td>当前页面出栈，新页面入栈</td> <td>页面重新加载</td></tr> <tr><td>页面返回</td> <td>返回/调用 API <code>wx.navigateBack</code></td> <td>页面不断出栈，直到目标返回页</td> <td>从右往左切回</td></tr> <tr><td>Tab 切换</td> <td>切换/调用 API <code>wx.switchTab</code></td> <td>页面全部出栈，只留下新的 Tab 页面</td> <td>页面重新加载</td></tr> <tr><td>重加载</td> <td>调用 API <code>wx.reLaunch</code></td> <td>页面全部出栈，只留下新的页面</td> <td>页面重新加载</td></tr></tbody></table> <p>关于导航 API 的几个补充点：</p> <ul><li><code>wx.navigateTo</code>和<code>wx.redirectTo</code>只能打开非 TabBar 页面，<code>wx.switchTab</code>只能打开 Tabbar 页面，<code>wx.reLaunch</code>可以打开任意页面</li> <li>TabBar 页面指在 app.json 的 TabBar 字段定义的页面（客户端窗口的底部或顶部有 tab 栏可以切换页面）</li> <li>跳转到 TabBar 页面，路径后不能带参数（注意，Tabbar 页面初始化之后不会被销毁）</li> <li>调用页面路由带的参数可以在目标页面的<code>onLoad</code>中获取</li></ul> <h2 id="页面层级准备"><a href="#页面层级准备" aria-hidden="true" class="header-anchor">#</a> 页面层级准备</h2> <p>我们知道页面栈的表现，以及一些常见的导航方法，而小程序基础库也在页面层级做了些体验优化。</p> <p>对于每一个新的页面层级，视图层都需要进行一些额外的准备工作：</p> <ul><li>在小程序启动前，微信会提前准备好一个页面层级用于展示小程序的首页</li> <li>每当一个页面层级被用于渲染页面，微信都会提前开始准备一个新的页面层级，减少每次新开页面的耗时</li></ul> <p>每个页面的准备都有三个阶段：</p> <ol><li>启动一个 WebView。</li> <li>WebView 中初始化基础库（此时还会进行一些基础库内部优化，以提升页面渲染性能）。</li> <li>注入小程序 WXML 结构和 WXSS 样式（小程序能在接收到页面初始数据之后马上开始渲染页面）。</li></ol> <p>PS：<code>wx.redirectTo</code>不会打开一个新的页面层级，而是将当前页面层级重新初始化。</p> <h2 id="参考"><a href="#参考" aria-hidden="true" class="header-anchor">#</a> 参考</h2> <ul><li><a href="https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html" target="_blank" rel="noopener noreferrer">导航.小程序<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html" target="_blank" rel="noopener noreferrer">路由.小程序<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://developers.weixin.qq.com/ebook?action=get_post_info&amp;token=935589521&amp;volumn=1&amp;lang=zh_CN&amp;book=miniprogram&amp;docid=0004eec99acc808b00861a5bd5280a" target="_blank" rel="noopener noreferrer">3.2 程序与页面<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://developers.weixin.qq.com/ebook?action=get_post_info&amp;token=935589521&amp;volumn=1&amp;lang=zh_CN&amp;book=miniprogram&amp;docid=000a64a29c48b0eb0086f161b5940a" target="_blank" rel="noopener noreferrer">7.2 页面层级准备<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h1 id="结束语"><a href="#结束语" aria-hidden="true" class="header-anchor">#</a> 结束语</h1> <p>页面的路由和跳转、切入方式，其实和用户的使用和交互紧紧相关，设计合理也是能大大提升用户体验的。<br>
其实这一节的内容，大部分都是小程序文档里面有的。只不过好些相关的内容被分散在各个地方，理解和使用起来还是需要查找，这一节就当作整理笔记吧。</p></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/wxapp/wxapp-principle/6-wxapp-page-and-navigate.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/wxapp/wxapp-principle/5-wxapp-basic-lib.html" class="prev">
          5. 关于小程序的基础库
        </a></span> <span class="next"><a href="/front-end-playground/wxapp/wxapp-principle/7-wxapp-component.html">
          7. 小程序自定义组件
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-6278" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty0.svg);"></div></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.e5cf4092.js" defer></script><script src="/front-end-playground/assets/js/3.c853767c.js" defer></script><script src="/front-end-playground/assets/js/2.eed49fdd.js" defer></script><script src="/front-end-playground/assets/js/125.37ef65ab.js" defer></script>
  </body>
</html>
